/**
 *  学习目标：props.children - 组件的插槽
 *    React 插槽和 Vue 插槽写法区别：
        Vue插槽 ：  <slot></slot>
        React插槽： { this.props.children }
 */
import React from 'react'

export default class App extends React.Component {
  render() {
    return (
      <>
        <h1>React组件的插槽</h1>
        <Card title='居家'>
          <div>居家内容-哈哈哈</div>
        </Card>
        <Card title='美食'>
          <div>美食内容-呵呵呵</div>
        </Card>
      </>
    )
  }
}

class Card extends React.Component {
  render() {
    return (
      <>
        <h2>卡片标题-{this.props.title}</h2>
        <section>
          {/* 
            React 插槽和 Vue 插槽写法区别：
              Vue插槽 ：  <slot></slot>
              React插槽： { this.props.children }
          */}
          {this.props.children}
        </section>
      </>
    )
  }
}
